var RepairCountChart = function () {
  var template = /* html */ `
    <div ref="chart" class="repair-count-chart" style="height:100%">
    </div>
  `;

  return {
    props: {
      repairData: {
        type: Object,
        required: true
      },
      search: {
        type: Object,
        required: true
      }
    },

    watch: {
      nameList: function (newVal, oldVal) {
        if (newVal.length < oldVal.length) {
          this.showChart();
          return;
        }
        this.resetChart();
      }
    },

    computed: {
      nameList: function () {
        var repairData = this.repairData;
        return repairData.nameList;
      },

      maxCountName: function () {
        var repairData = this.repairData;
        return repairData.maxObj.work_name;
      }
    },

    data: function () {
      return {
        hasSelect: true
      };
    },

    mounted: function () {
      this.showChart();

      var self = this;
      $(this.$el).resize(function () {
        var chartDom = self.$refs['chart'];
        if (chartDom === undefined) {
          return;
        }
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart !== undefined) {
          chart.resize();
        }
      });
    },

    methods: {
      getChart: function () {
        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          chart = echarts.init(chartDom);
          var self = this;
          chart.on('legendselectchanged', function (params) {
            var maxCountName = self.maxCountName;
            if (maxCountName !== params.name) {
              return;
            }

            var selected = params.selected;
            var hasSelect = selected[maxCountName];
            self.hasSelect = hasSelect;
            self.changeShowPathMove(chart, hasSelect);
          });
        }
        return chart;
      },

      changeShowPathMove: function (chart, hasSelect) {
        if (hasSelect) {
          this.resetChart();
          return;
        }
        chart.setOption({
          series: [{
            effect: {
              show: false
            }
          }]
        })
      },

      showChart: function () {
        var chart = this.getChart();
        var chartOption = this.getChartOption();
        this.resetChartOption(chartOption);
        chart.setOption(chartOption, true);
      },

      resetChart: function () {
        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          this.showChart();
          return;
        }

        var chartOption = {};
        this.resetChartOption(chartOption);
        chart.setOption(chartOption);
      },

      getChartOption: function (chartOption) {
        var year = this.search.year;
        year = moment(year).get('year');
        var nameList = this.repairData.nameList;
        var chartOption = {
          color: window.boardChartColor,
          grid: {
            right: 30,
            left: 50,
            bottom: 30,
            top: 45
          },
          legend: {
            type: 'scroll',
            top: 0,
            textStyle: {
              color: '#44D3E4',
              fontSize: 16
            },
            pageTextStyle: {
              color: '#44D3E4',
              fontSize: 16
            }
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              interval: 0,
              formatter: function (value) {
                return value + '月';
              }
            }
          }],
          yAxis: [{
            min: 0,
            max: 5,
            name: '次',
            nameGap: 8,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12
            }
          }],
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              var repairParams = [];
              var data = params[0].data;
              for (var i = 0; i < params.length; i++) {
                var param = params[i];
                var seriesName = param.seriesName;

                var index = nameList.indexOf(seriesName);
                var value = data[index + 1];
                if (value === 0) {
                  continue;
                }
                repairParams.push({
                  marker: param.marker,
                  name: seriesName,
                  value: value
                });
              }

              if (repairParams.length === 0) {
                return '';
              }

              repairParams = _.orderBy(repairParams, ['value'], ['desc']);

              var name = params[0].name;
              name = ('0' + name).substr(-2);
              var textList = [`${year}年${name}月`];
              for (var i = 0; i < repairParams.length; i++) {
                var param = repairParams[i];
                textList.push(`${param.marker} ${param.name}:${param.value}次`);
              }

              return textList.join('<br>');
            }
          },
          dataset: {
            source: []
          },
          series: []
        };
        return chartOption;
      },

      resetChartOption: function (chartOption) {
        var repairData = this.repairData;
        var maxCount = repairData.maxCount;
        maxCount = Math.ceil(maxCount / 5) * 5;
        _.set(chartOption, 'yAxis[0].max', maxCount);

        var chartData = repairData.getChartData();
        _.set(chartOption, 'dataset.source', chartData);

        var coords = repairData.getMoveCoords();
        var series = [{
          type: 'lines',
          id: 'path',
          coordinateSystem: 'cartesian2d',
          polyline: true,
          lineStyle: {
            width: 0
          },
          zlevel: 2,
          effect: {
            show: this.hasSelect,
            symbol: 'arrow',
            symbolSize: 10,
            constantSpeed: 30,
            color: '#ffffff'
          },
          animation: false,
          data: [{
            coords: coords
          }]
        }];

        var count = chartData.length - 1;
        for (var i = 0; i < count; i++) {
          series.push({
            type: 'line',
            seriesLayoutBy: 'row'
          });
        }

        _.set(chartOption, 'series', series);
      }
    },

    template: template
  };
}();
